<template>
  <n-el>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="30 0 579.43 484.77"
    >
      <defs>
        <filter
          id="filter-1"
          x="-80.0%"
          y="-80.0%"
          width="260.0%"
          height="260.0%"
          filterUnits="objectBoundingBox"
        >
          <feGaussianBlur stdDeviation="12" in="SourceGraphic" />
        </filter>
      </defs>
      <g style="opacity: 0.9">
        <g>
          <image
            width="609"
            height="226"
            transform="translate(0.43 148.18)"
            xlink:href=""
          />
          <path
            d="M.24,161.44h471a88,88,0,0,1,0,176H.24Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--info-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <g>
          <image
            width="373"
            height="212"
            transform="translate(0.14 246.43)"
            xlink:href=""
          />
          <path
            d="M-.34,259.64h242a81,81,0,1,1,0,162H-.34Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--error-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <g>
          <image
            width="510"
            height="162"
            transform="translate(0.06 78.37)"
            xlink:href=""
          />
          <path
            d="M-.44,91.54h404a56,56,0,1,1,0,112H-.44Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--warning-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <g>
          <image
            width="206"
            height="127"
            transform="translate(0.38 357.77)"
            xlink:href=""
          />
          <path
            d="M0,371H117.5a38.5,38.5,0,0,1,0,77H0Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--warning-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <g>
          <image
            width="142"
            height="77"
            transform="translate(308.86 25.74)"
            xlink:href=""
          />
          <path
            d="M322.05,39h65a13.51,13.51,0,0,1,13.5,13.5h0A13.5,13.5,0,0,1,387.05,66h-65a13.49,13.49,0,0,1-13.5-13.5h0A13.5,13.5,0,0,1,322.05,39Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--error-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <g>
          <image
            width="175"
            height="77"
            transform="translate(236.67 341.14)"
            xlink:href=""
          />
          <path
            d="M249.83,354.35h98a13.49,13.49,0,0,1,13.5,13.5h0a13.49,13.49,0,0,1-13.5,13.5h-98a13.49,13.49,0,0,1-13.5-13.5h0A13.49,13.49,0,0,1,249.83,354.35Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--success-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <g>
          <image
            width="323"
            height="162"
            xlink:href=""
          />
          <path
            d="M-.23,13.17h217a56,56,0,0,1,0,112H-.23Z"
            transform="translate(25.34 9.79)"
            :style="{
              transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
              fill: 'var(--success-color)',
              fillRule: 'evenodd',
            }"
          />
        </g>
        <circle
          fill-opacity="0.3"
          fill="#000000"
          filter="url(#filter-1)"
          cx="477.54"
          cy="66.09"
          r="20"
        />
        <circle
          cx="477.54"
          cy="66.09"
          r="22.5"
          :style="{
            transition: `fill .3s var(--cubic-bezier-ease-in-out)`,
            fill: 'var(--info-color)',
          }"
        />
      </g>
    </svg>
  </n-el>
</template>
